<!-- 教育服务详情页 -->
<template>
	<view class="center">
		<view class="center_top ">
			<u-swiper @click="lookimg(fromobj.imglist)" :list="fromobj.imglist" @change="e => currentNum = e.current"
				:autoplay="true" indicatorStyle="right: 20px" height='180' indicatorMode="line" circular>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ fromobj.imglistlength }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="center_title">
			<view class="title_title">
				{{fromobj.title}}
			</view>
			<!-- <view class="" style="color: #f3431c; font-weight: 600; font-size: 22px;">
				{{fromobj.expSalary?fromobj.expSalary:''}}
			</view> -->
			<view class="item-two">
				<view class="two__item">
					教育服务
				</view>
			</view>
			<view class="title_time" style="display: flex; justify-content: space-between;">
				<view class="">
					{{fromobj.timestr}}
				</view>
				<view class="" style="display: flex;">
					<span><u-icon name="eye-fill" color="#999" size="17"></u-icon></span>
					<span>{{fromobj.scanNum}}</span>
				</view>
			</view>
		</view>
		<view class="center_bot">

			<view class="bot_two">
				<view class="towtop">
					教育服务
				</view>
				<view class="twobot">
					{{fromobj.details}}
				</view>
			</view>
			<view class="bot_map">
				<view class="maptop">
					区域
				</view>
				<view class="mapbot">
					{{fromobj.areaName}}
				</view>
			</view>
			<view class="bot_three">
				<view class="threetop">
					联系人:{{fromobj.linkName}}
				</view>
				<view class="threebot" @click="iphone(fromobj.linkPhone)">
					<view class="">
						<u-icon name="phone" size="23" color="#e83c61"></u-icon>
					</view>
					<view class="botiphone">
						电话咨询
					</view>
				</view>
			</view>
			<view class="bot_four" @click="userdetail(fromobj.memberId)">
				<view class="fouraratar">
					<u-avatar :src="fromobj.memberHeadImage" size='40' shape="circle"></u-avatar>
				</view>
				<view class="fourtitle">
					<view class="title-top">
						<view class="">
							{{fromobj.linkName}}
						</view>
						<view class="title_lable" v-if="fromobj.memberType==1"
							style="background: linear-gradient(to right bottom, #c98a47, #dca963, #dcc193);width: 30px;">
							个人
						</view>
						<view class="title_lable" v-else-if="fromobj.memberType==2"
							style="background: linear-gradient(to right bottom, #0055ff, #00aaff, #00ffff);width: 30px;">
							商家
						</view>
						<view class="title_lable" v-else-if="fromobj.memberType==3"
							style="background: linear-gradient(to right bottom, #ff0000, #ff5500, #ffff00);width: 50px;">
							认证商家
						</view>
					</view>
					<view class="title-bot">
						<view class="">
							已发布{{fromobj.memberPubNum}}条
						</view>
						<view class="">
							<u-icon name="arrow-right-double" color="#b6b6b6" size="10"></u-icon>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="botbar">
			<view class="botbar_item">
				<view class="item" @click="gohome">
					<span class="icon"> <u-icon name="home" color="#000" size="23"></u-icon></span>
					<span style="font-size: 12px;">首页</span>
				</view>
				<view class="item">
					<button open-type="share" class="button_item">
						<span class="icon"> <u-icon name="share-square" color="#000" size="23"></u-icon></span>
						<span style="font-size: 12px;">分享</span>
					</button>
				</view>
				<view class="item" @click="setadd" v-if="fromobj.collectState==0">
					<span class="icon"> <u-icon name="star" color="#000" size="23"></u-icon></span>
					<span style="font-size: 12px;">收藏</span>
				</view>
				<view class="item" @click="cancel" v-else>
					<span class="icon"> <u-icon name="star-fill" color="#ffaa00" size="23"></u-icon></span>
					<span style="font-size: 12px;">已收藏</span>
				</view>
			</view>
			<view class="bot-center" @click="iphone(fromobj.linkPhone)">
				<span style="margin-right: 6px;"> <u-icon name="phone-fill" color="#fff"
						size="23"></u-icon></span><span>拨打电话</span>
			</view>
		</view>
		<iphone :showvisiable='showvisiable' @concheck='concheck' :iphones='iphones'></iphone>
	</view>
</template>

<script scoped>
	import {
		formatTimeAgo,
		judgetoken,
	} from '../../utils/utils.js'
	import iphone from '../assembly/iphone-notice.vue'
	export default {
		props: {},
		components: {
			iphone
		},
		data() {
			return {
				iphones: '',
				showvisiable: false,
				fromobj: {
					imglistlength: "",
					jobInterest: "",
					timestr: "",
					scanNum: "",
					indResume: "",
					areaName: "",
					linkName: "",
					nickName: "",
				},
				id: null,
				currentNum: 0,
				list1: [

				]
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		onLoad(options) {
			// 从路由参数中获取传递的值			
			this.id = decodeURIComponent(options.typeid);
			this.submessdetail()
		},
		methods: {
			lookimg(e) {
				uni.previewImage({
					urls: e
				})
			},
			userdetail(id) {
				uni.navigateTo({
					url: '/pages/detail/dynamicdetails?id=' + encodeURIComponent(id)
				});
			},
			gohome() {
				uni.reLaunch({
					url: '/pages/homepage/homepage'
				});
			},
			setadd() {
				if (judgetoken()) {
					const that = this
					this.$request(`/collect/add/9/${this.id}`, 'get').then(
						res => {
							const eventChannel = this.getOpenerEventChannel()
							eventChannel.emit('reverseData', {
								data: true
							})
							that.fromobj.collectState = res.data.success ? 1 : that.fromobj.collectState
						})
				} else {
					return
				}
			},
			cancel() {
				const that = this
				this.$request(`/collect/cancel/9/${this.id}`, 'get').then(
					res => {
						that.fromobj.collectState = res.data.success ? 0 : that.fromobj.collectState
						const eventChannel = this.getOpenerEventChannel()
						eventChannel.emit('reverseData', {
							data: true
						})

					})
			},
			iphone(e) {
				this.iphones = e
				this.showvisiable = true

			},
			concheck(e, a) {
				this.showvisiable = false
				if (e) {
					uni.makePhoneCall({
						phoneNumber: a //仅为示例
					});
				}
			},
			submessdetail() {
				const that = this
				this.$request(`/education/detail/${this.id}`, 'get').then(
					res => {
						that.fromobj = res.data.data
						that.fromobj.timestr = formatTimeAgo(that.fromobj.updateTime)
						that.fromobj.imglist = that.fromobj.headImages == '' ? [] : that.fromobj.headImages.split(
							",")
						that.fromobj.imglistlength = that.fromobj.imglist.length
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.center {
		padding: 10px;
		min-height: calc(100vh - 20px);
		background-color: #f5f5f5;

		.center_top {
			height: 180px;
			background-color: antiquewhite;

			.indicator-num {
				padding: 2px 0;
				background-color: rgba(0, 0, 0, 0.35);
				border-radius: 100px;
				width: 35px;
				@include flex;
				justify-content: center;

				&__text {
					color: #FFFFFF;
					font-size: 12px;
				}
			}
		}

		.center_title {
			margin-top: 10px;
			border-radius: 10px;
			padding: 15px;
			background-color: #fff;

			.title_ma {
				height: 30px;
				margin: 10px 0;

				.mabot {
					font-size: 22px;
					color: #ff0004;
				}
			}

			.item-two {
				display: flex;
				align-items: center;
				font-size: 12px;
				margin-bottom: 5px;
				margin-top: 5px;

				.two__item {
					padding: 2px 8px;
					margin-right: 3px;
					border-radius: 3px;
					color: #000;
					background-color: #fbeaa4;
				}

				:first-child {
					background-color: #fbc338;
				}
			}

			.title_title {
				font-size: 21px;
				font-weight: 550;
			}

			.title_time {
				// margin-top: 10px;
				font-size: 12px;
				color: #909090;
			}
		}

		.center_bot {
			margin-bottom: 60px;

			.bot_one {
				border-radius: 10px;
				display: flex;
				align-items: center;
				margin-top: 15px;
				padding: 15px;
				background-color: #fff;

				.onetop {
					margin-right: 10px;
				}

				.onebot {
					font-size: 13px;
					color: #666;
				}
			}

			.bot_two {
				border-radius: 10px;

				margin-top: 15px;
				padding: 15px;
				background-color: #fff;

				.towtop {
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 10px;
				}

				.twobot {
					font-size: 14px;
					// color: #909090;
				}
			}

			.bot_map {
				border-radius: 10px;
				margin-top: 15px;
				padding: 15px;
				background-color: #fff;
				font-size: 14px;
				display: flex;

				.maptop {
					font-weight: 600;
					margin-right: 10px;
				}
			}

			.bot_three {
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15px;
				padding: 15px;
				background-color: #fff;

				.threetop {
					font-size: 15px;
				}

				.threebot {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.botiphone {
						font-size: 12px;
						color: #e83c61;
					}
				}
			}

			.bot_four {
				border-radius: 10px;
				display: flex;
				align-items: center;
				margin-top: 15px;
				padding: 15px;
				background-color: #fff;

				.fouraratar {
					margin-right: 10px;
				}

				.fourtitle {

					.title-top {
						display: flex;
						font-size: 14px;
						align-items: flex-end;

						.title_lable {
							margin-left: 5px;
							padding: 1px 3px;
							font-size: 10px;
							color: #fff;
							border-radius: 2px;
						}

					}

					.title-bot {
						color: #b6b6b6;
						display: flex;
						font-size: 11px;
						align-items: center;

					}
				}

			}
		}

		.botbar {
			padding: 0 20px;
			position: fixed;
			height: 60px;
			width: calc(100vw - 40px);
			bottom: 0;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.botbar_item {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 30px;

					.button_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 !important;
						line-height: normal;
					}

					.button_item::after {
						display: none;
					}
				}
			}

			.bot-center {
				margin: 2px 0;
				height: 40px;
				width: 27%;
				border-radius: 20px;
				background: linear-gradient(to left, #fe7012, #ffa907);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 13px;
				color: #fff;
			}
		}

	}
</style>